<!-- 拖拽盒子面板 -->
<template>
  <div class="content2">
    <div class="boxList" v-for="(item, index) in boxList" :key="index" :style="item.boxStyle">{{ item.name }}</div>
  </div>
</template>
<script>
 export default {
   name: 'boxView',
   data() {
     return {
        boxList: [
            {
                name: '容器',
                type:'div',
                boxStyle: {
                    backgroundColor: '#a86666',
                    color: '#fff',
                },
                style: {
                    width: '100%',
                    backgroundColor: '#f5f5f5',
                }
            },
            {
                name: '输入框',
                type:'input',
                boxStyle: {
                    backgroundColor: '#668da8',
                    color: '#fff',
                },
                style: {
                    width: '100%',
                    backgroundColor: '#f5f5f5',
                }
            },
            {
                name: '文本框',
                type:'span',
                boxStyle: {
                    backgroundColor: '#875fa3',
                    color: '#fff',
                },
                style: {
                    width: '100%',
                    backgroundColor: '#f5f5f5',
                }
            },
            {
                name: '线条',
                type:'div',
                boxStyle: {
                    backgroundColor: '#50977c',
                    color: '#fff',
                },
                style: {
                    width: '100%',
                    backgroundColor: '#f5f5f5',
                }
            },
            {
                name: '按钮',
                type:'button',
                boxStyle: {
                    backgroundColor: '#13ab51',
                    color: '#fff',
                },
                style: {
                    width: '100%',
                    backgroundColor: '#f5f5f5',
                }
            },
            {
                name: '表格',
                type:'table',
                boxStyle: {
                    backgroundColor: '#c27c23',
                    color: '#fff',
                },
                style: {
                    width: '100%',
                    backgroundColor: '#f5f5f5',
                }
            }
        ]
     }
   }
 }
</script>
<style scoped lang="scss">
 .content2 {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;  /* 自动显示垂直滚动条 */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
    box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
    .boxList{
        box-sizing: border-box;
        width: 100%;
        background-color: #999;
        padding: 10px ;
        border-radius: 10px;
        font-size: 12px;
        margin:10px 0;
        box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    }
    .content2::-webkit-scrollbar {
        display: none;  /* Chrome/Safari/Edge */
    }

 }
</style>